<template>
  <div class="achievement-container">

    <div class="patrol-container">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
          <div class="patrol-list">
            <van-cell-group v-for="(item, index) in dsyrList" :key="index" class="patrol-item">
              <van-cell title="班级名称" :value="item.className" />



              <van-cell title="教学内容清晰度" class="rate-cell">
                <template #value>
                  <span class="evaluation-text">{{ getContentClarityText(item.meetingType) }}</span>
                </template>
              </van-cell>

              <van-cell title="会议时间" :value="formatTime(item.meetingTime)" />

              <van-cell title="会议内容" :value="item.meetingContent" />

              <van-cell title="会议照片" v-if="item.photoPath">
                <template #value>
                  <van-image
                      width="80"
                      height="80"
                      :src="item.photoPath"
                      @click="showImagePreview(item.photoPath)"
                  />
                </template>
              </van-cell>

              <van-cell title="记录时间" :value="formatTime(item.createTime)" />
            </van-cell-group>
          </div>
        </van-list>
      </van-pull-refresh>

      <van-image-preview
          v-model:show="showPreview"
          :images="previewImages"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getMyDormitoryRecordsUsingPost1 } from "../../Api/xunkemokuai.ts";
import { useUserStore } from '../../Store/modules/userinfo/UserInfo.ts';
import { showToast } from 'vant';
import {getRecordsSummaryMentorUsingPost} from "../../Api/daoshiyuren.ts";

const userInfo = useUserStore();

// 数据列表
const dsyrList = ref([]);
// 加载状态
const loading = ref(false);
// 是否已加载完成
const finished = ref(false);
// 是否正在下拉刷新
const refreshing = ref(false);
// 当前页码
const currentPage = ref(1);
// 每页条数
const pageSize = ref(10);
// 图片预览相关
const showPreview = ref(false);
const previewImages = ref([]);

// 获取教师育人列表
async function getXunKeList() {
  try {
    loading.value = true;

    const response = await getRecordsSummaryMentorUsingPost({
      organizerId: userInfo.userInfo.userId,
      current: currentPage.value,
      pageSize: pageSize.value
    });

    if (refreshing.value) {
      dsyrList.value = [];
      refreshing.value = false;
    }

    const newData = response.data.data?.records || [];
    dsyrList.value = response.data.data

    // 判断是否已加载全部数据
    if (newData.length < pageSize.value) {
      finished.value = true;
    }
    // console.log(dsyrList.value[0])

  } catch (err) {
    // console.error(err);
    showToast('获取数据失败');
  } finally {
    loading.value = false;
  }
}

// 加载更多
function onLoad() {
  if (refreshing.value) {
    refreshing.value = false;
  }
  currentPage.value += 1;
  getXunKeList();
}

// 下拉刷新
function onRefresh() {
  finished.value = false;
  loading.value = true;
  currentPage.value = 1;
  getXunKeList();
}

// 格式化时间
function formatTime(timeStr) {
  if (!timeStr) return '';
  const date = new Date(timeStr);
  return date.toLocaleString();
}

// 获取教学内容清晰度文本
function getContentClarityText(score) {
  const texts = ['班会', '组会', '学业指导'];
  return texts[Math.round(score) - 1] || '';
}

// 获取课堂互动情况文本
function getInteractionText(score) {
  const texts = ['较差', '一般', '良好'];
  return texts[Math.round(score) - 1] || '';
}

// 预览图片
function showImagePreview(imageUrl) {
  previewImages.value = [imageUrl];
  showPreview.value = true;
}

onMounted(() => {
  getXunKeList();
});
</script>

<style scoped>
.achievement-container {
  height: 100vh;
  overflow-y: auto;
  padding: 10px;
  background-color: #f8f9fa;
}
.patrol-container {
  padding: 12px;
}


.patrol-item {
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.evaluation-text {
  margin-left: 8px;
  color: #666;
}

/* 评分单元格样式 */
.rate-cell {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
}

/* 评分容器 */
.rate-container {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 右对齐关键设置 */
  width: 100%;
  gap: 10px;
}

/* 评价文字样式 */
.evaluation-text {
  font-size: 14px;
  color: #666;
  order: 1; /* 文字在前 */
}

/* 星星样式 */
.rate-stars {
  order: 2; /* 星星在后 */
}

/* 强制右对齐 */
:deep(.van-cell__value) {
  flex: 1;
  text-align: right;
}

</style>